{# Copyright (c) 2014-2017, NVIDIA CORPORATION.  All rights reserved. #}

{% extends "job.html" %}
{% from "helper.html" import serve_file %}

{% block job_content %}

<script src="{{ url_for('static', filename='js/model-graphs.js', ver=dir_hash) }}"></script>

{% set task = job.train_task() %}

<div class="row">
    <div class="col-sm-6">
        <div class="well">
            <dl>
                <dt>Job Directory</dt>
                <dd>{{ job.dir() }}</dd>
                <dt>Disk Size</dt>
                <dd>{{job.disk_size_fmt()}}</dd>
                {% for key,value in task.get_model_files().items() %}
                <dt>{{key}}</dt>
                <dd>{{serve_file(task, value)}}</dd>
                {% endfor %}
                {% if task.log_file %}
                <dt>Raw {{task.get_framework_id()}} output</dt>
                <dd>{{serve_file(task, task.log_file)}}</dd>
                {% endif %}
                {% if task.pretrained_model %}
                <dt>Pretrained Model</dt>
                <dd>{{task.pretrained_model}}</dd>
                {% endif %}
            </dl>
        </div>
    </div>
    <div class="col-sm-6">
        <div class="well">
            <h4 class='text-center'>Dataset</h4>
            <div id="dataset-summary"></div>
            {% if job.dataset %}
            <script>
            $.ajax("{{url_for('digits.dataset.views.summary', job_id=job.dataset.id())}}",
            {
                type: "GET",
                }
            )
            .done(function(data) {
                $("#dataset-summary").html(data);
                })
            .fail(function(data) {
                $("#dataset-summary").html("");
                errorAlert(data);
                });
            </script>
            {% endif %}
        </div>
    </div>
</div>

<div id="nuance_modal" class="modal fade" role="dialog">
    <div class="modal-dialog">
        <!-- Modal content-->
        <div class="modal-content">
            <form method="post" id="nuance_form"
                  action="{{ url_for('digits.model.views.publish_inference', job_id=job.id()) }}">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal">
                        &times;
                    </button>
                    <h4 class="modal-title">Publish to inference server</h4>
                </div>
                <div class="modal-body">
                    <p>
                    <div class="row">
                        <div class="col-sm-6" align="right">
                            <label for="description">Description:</label>
                        </div>
                        <div class="col-sm-6">
                            <input type="text" name="description" id="description"
                                   class="form-control" placeholder="Description">
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-sm-6" align="right">
                            <label for="output_layer">Output layer:</label>
                        </div>
                        <div class="col-sm-6">
                            <input type="text" name="output_layer" id="output_layer"
                                   class="form-control" placeholder="softmax">
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-sm-6" align="right">
                            <label for="input_layer">Input layer:</label>
                        </div>
                        <div class="col-sm-6">
                            <input type="text" name="input_layer" id="input_layer"
                                   class="form-control" placeholder="in">
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-sm-6" align="right">
                            <label for="input_shape">Input shape:</label>
                        </div>
                        <div class="col-sm-6">
                            <input type="text" name="input_shape" id="input_shape"
                                   class="form-control" placeholder="224, 224">
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-sm-6" align="right">
                            <label for="output_shape">Output shape:</label>
                        </div>
                        <div class="col-sm-6">
                            <input type="text" name="output_shape" id="output_shape"
                                   class="form-control" placeholder="10">
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-sm-6" align="right">
                            <label>Modality:</label>
                        </div>
                        <div class="col-sm-6">
                            <div class="checkbox-inline">
                                <label><input type="checkbox" name="modality" value="CT">CT</label>
                            </div>
                            <div class="checkbox-inline">
                                <label><input type="checkbox" name="modality" value="XA">X-ray</label>
                            </div>
                            <div class="checkbox-inline">
                                <label><input type="checkbox" name="modality" value="MR">MR</label>
                            </div>
                        </div>
                    </div>
                    </p>
                </div>
                <div class="modal-footer">
                    <button type="submit" class="btn btn-info">Submit
                    </button>
                </div>
            </form>
        </div>
    </div>
</div>


<div class="row">
    <div class="col-sm-12">
        <div class="well">
            <div id="combined-graph" class="combined-graph"
                style="height:500px;width:100%;background:white;display:none;"></div>
            <span name="combined_graph_explanation"
                            class="explanation-tooltip glyphicon glyphicon-question-sign combined-graph"
                            data-container="body"
                            title="Use bottom chart to select region of interest. Drag to pan left/right. Click outside of region to unselect."
                            style="display:none;"
                                ></span>
            <div class="pull-right combined-graph" style="display:none;">
                <a class="btn btn-primary btn-sm" target="_blank"
                    href="{{url_for('digits.model.images.classification.views.large_graph', job_id=job.id())}}">
                    View Large
                </a>
                {% if job.train_task().has_timeline_traces() %}
                <a class="btn btn-primary btn-sm" target="_blank"
                    href="{{url_for('digits.model.images.classification.views.timeline_tracing', job_id=job.id())}}">
                    View Timeline Traces
                </a>
                {% endif %}
            </div>
            <br>
            <br>
            {% set combined_graph_data = job.train_task().combined_graph_data() %}
            {% if combined_graph_data %}
            <script>
                drawCombinedGraph({% autoescape false %}{{combined_graph_data}}{% endautoescape %});
            </script>
            {% endif %}

            <div id="lr-graph" class="lr-graph"
                style="height:300px;width:100%;background:white;display:none;"></div>
            {% set lr_graph_data = job.train_task().lr_graph_data() %}
            {% if lr_graph_data %}
            <script>
                drawLRGraph({% autoescape false %}{{lr_graph_data}}{% endautoescape %});
            </script>
            {% endif %}

            {% set task = job.train_task() %}
            <hr>
            <form id="test-model-form"
                enctype="multipart/form-data"
                method="post"
                onkeypress="return event.keyCode != 13;" {# Disable enter to submit #}
                {% if not task.has_model() %}
                style="display:none;"
                {% endif %}
                >
                <h2>Trained Models</h2>
                <div class="row">
                    <div class="col-sm-12">
                        <label for="snapshot_epoch">Select Model</label>
                    </div>
                </div>
                <div class="row">
                    <div class="col-sm-3">
                        <div class="form-group">
                            <select id="snapshot_epoch" name="snapshot_epoch" class="form-control">
                            </select>
                            <script>
function updateSnapshotList(data) {
    var selected = null;
    var latest_selected = true;
    if ($("#snapshot_epoch").find('option').length) {
        latest_selected = ($("#snapshot_epoch").find('option').first().val() == $("#snapshot_epoch").val());
        selected = $("#snapshot_epoch").val();
    }
    // remove old options
    $("#snapshot_epoch").find("option").remove();
    if (data.length)
        $("#test-model-form").show();
    for (var i=0; i<data.length; i++) {
        option = data[i];
        $("#snapshot_epoch").append('<option value="'+option[0]+'">'+option[1]+'</option>');
    }
    if (data.length) {
        var value = selected;
        if (!value || latest_selected)
            value = data[0][0];
        if (value)
            $("#snapshot_epoch").val(value);
    }
}
updateSnapshotList({% autoescape false %}{{task.snapshot_list()}}{% endautoescape %});
                            </script>
                        </div>
                    </div>
                    <div class="col-sm-9">
                        <button
                            formaction="{{url_for('digits.model.views.download', job_id=job.id())}}"
                            formmethod="post"
                            formenctype="multipart/form-data"
                            class="btn btn-info">
                            Download Model
                        </button>
                        <button
                            formaction="{{url_for('digits.model.views.to_pretrained', job_id=job.id())}}"
                            formmethod="post"
                            formenctype="multipart/form-data"
                            class="btn btn-success">
                            Make Pretrained Model
                        </button>
                        <!-- Trigger the modal with a button -->
                        <button type="button" class="btn btn-success" data-toggle="modal"
                                data-target="#nuance_modal">
                            Publish to inference server
                        </button>
                    </div>
                </div>
                {% if task.get_framework_id() in framework_ids %}
                <div class="row">
                    <div class="col-sm-6">
                        <h3>Test a single image</h3>
                        <div class="form-group">
                            <label for="image_path" class="control-label">Image Path</label>
                            <span name="image_path_explanation"
                                class="explanation-tooltip glyphicon glyphicon-question-sign"
                                data-container="body"
                                title="Can be a path on the server's filesystem, or a URL."
                                ></span>
                            <input type="text" id="image_path" name="image_path" class="form-control autocomplete_path">
                        </div>
                        <div>
                            <label for="image_file" class="control-label">Upload image</label>
                            <div class="form-group cl-upload-files">
                                <div class="input-group">
                                    <span class="input-group-btn">
                                        <span class="btn btn-info btn-file" %s>
                                            Browse&hellip;
                                            <input class="form-control" type="file" id="image_file" name="image_file" >
                                        </span>
                                    </span>
                                    <input class="form-control" type="text" readonly>
                                </div>
                            </div>
                        </div>
                        <script type="text/javascript">
                            // When you fill in one field, the other gets blanked out
                            $("#image_path").change(function() { $("#image_file").val(""); });
                            $("#image_file").change(function() { $("#image_path").val(""); });
                        </script>
                        <div class="form-group">
                            <label for="show_visualizations">
                                <input id="show_visualizations" name="show_visualizations" type="checkbox" value="y">
                                Show visualizations and statistics
                            </label>
                            <span name="show_visualizations_explanation"
                                class="explanation-tooltip glyphicon glyphicon-question-sign"
                                data-container="body"
                                title="For each layer in the network, show statistics for the weights/activations and attempt to represent the data visually. Can delay classification considerably."
                                ></span>
                        </div>
                        <button name="classify-one-btn"
                            formaction="{{url_for('digits.model.images.classification.views.classify_one', job_id=job.id())}}"
                            formmethod="post"
                            formenctype="multipart/form-data"
                            formtarget="_blank"
                            class="btn btn-primary">
                            Classify One
                        </button>
                    </div>
                    <div class="col-sm-6">
                        <h3>Test a list of images</h3>
                        <div>
                            <label for="image_list" class="control-label">Upload Image List</label>
                            <div class="form-group cl-upload-files">
                                <div class="input-group">
                                    <span class="input-group-btn">
                                        <span class="btn btn-info btn-file" %s>
                                            Browse&hellip;
                                            <input class="form-control" type="file" id="image_list" name="image_list" >
                                        </span>
                                    </span>
                                    <input class="form-control" type="text" readonly>
                                </div>
                                <small>Accepts a list of filenames or urls (you can use your val.txt file)</small>
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="image_folder" class="control-label">Image folder <i>(optional)</i></label>
                            <input type="text" id="image_folder" name="image_folder" class="form-control autocomplete_path">
                            <small>Relative paths in the text file will be prepended with this value before reading</small>
                        </div>
                        <div class="form-group">
                            <label for="num_test_images" class="control-label">Number of images use from the file</label>
                            <input type="text" id="num_test_images" name="num_test_images" class="form-control" placeholder="All">
                            <small>Leave blank to use all</small>
                        </div>
                        <button name="classify-many-btn"
                            formaction="{{url_for('digits.model.images.classification.views.classify_many', job_id=job.id())}}"
                            formmethod="post"
                            formenctype="multipart/form-data"
                            formtarget="_blank"
                            class="btn btn-primary">
                            Classify Many
                        </button>
                        <span name="classify-many-explanation"
                            class="explanation-tooltip glyphicon glyphicon-question-sign"
                            data-container="body"
                            title="Classify a list of images and show the top 5 category predictions for each."
                            ></span>
                        <div class="form-group">
                            <label for="top_n" class="control-label">Number of images to show per category</label>
                            <input type="text" id="top_n" name="top_n" class="form-control" placeholder="9">
                        </div>
                        <button name="top-n-btn"
                            formaction="{{url_for('digits.model.images.classification.views.top_n', job_id=job.id())}}"
                            formmethod="post"
                            formenctype="multipart/form-data"
                            formtarget="_blank"
                            class="btn btn-primary">
                            Top N Predictions per Category
                        </button>
                        <span name="top-n-explanation"
                            class="explanation-tooltip glyphicon glyphicon-question-sign"
                            data-container="body"
                            title="Classify a list of images and show the top N results per category by confidence."
                            ></span>
                    </div>
                </div>
                {% endif %}
            </form>
        </div>
    </div>
</div>

<script>
$('#nuance_form').submit(function() {
    $('#nuance_modal').modal('toggle');
});
</script>

{% endblock %}

